<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/layer/3.0.1/skin/default/layer.min.css">
	<link rel="stylesheet" href="../../../layui/css/layui.css">
	<!-- loading -->
	<link rel="stylesheet" href="../../../css/jquery.mloading.css">
</head>
<body>
	<div style="margin-top: 15px" id="chooserole">
		<form class="layui-form" action="">
			
			<div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="username" value="{{user.username}}"  readonly
						placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" required lay-verify="name"  value="{{user.name}}"
						placeholder="请输入标题" autocomplete="off" class="layui-input" disabled>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					<input v-for="(index, item) in roles" id="{{item.guid}}" value="{{item.guid}}" type="checkbox" name="role" title="{{item.role_name}}">
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
					<button class="layui-btn  layui-btn-danger" lay-submit lay-filter="cannelDemo">取消所有角色</button>
				</div>
			</div>
		</form>
	</div>

	<!-- jQuery -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- jquery.cookie -->
	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<!-- layer -->
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<!-- vue -->
	<script src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></script>
	<script src="../../../layui/layui.js"></script>
	<script src="../../../js/byking.js"></script>
	<script src="../../../js/hostconfig.js"></script>
	<script src="../../../js/byking-verify.js"></script>
	<script src="../../../js/jquery.mloading.js"></script>

	<script>
		var userId = $byking.getUrlParam("userId");
		var departmentId = $byking.getUrlParam("departmentId");
		
		//var userId = "b411801f-150f-4751-9f27-9bf18dd9c3fb";
		//var departmentId = "7cc9fd4b-cfca-4042-b727-237c018ef796";
		
		var chooserole = new Vue({
	        el: "#chooserole",
	        data: {
	        	user:null,
	        	roles:[]
	        }
	    });
		
		function getUserInfo() {
			var url = $hostconfig.sysAuthHost+"/user/info/detail?guid="+userId;
			$byking.getJSONWithToken(url,function(data){
				chooserole.user = data.data;
				var roleGuids = data.data.roleGuids;
				if(roleGuids && roleGuids.length>0) {
					for(var i=0 ; i < roleGuids.length; i++) {
						$("#"+roleGuids[i]).attr("checked","checked");
					}
				}
				setTimeout(function () { 
					var form = layui.form();
					form.render("checkbox");
					form.render("radio");
					$("#chooserole").mLoading("hide");
			    }, 100);
				
			},function(data){
				layer.msg(data.responseJSON.message, {icon:5});
			});
		}
		
		function getRoleList(){
			$("#chooserole").mLoading("show");
			var url = $hostconfig.sysAuthHost+"/department/roles?guid="+departmentId;
			$byking.getJSONWithToken(url,function(data){
				chooserole.roles = data.data;
				getUserInfo();
			},function(data){
				layer.msg(data.responseJSON.message, {icon:5});
			});
		}
		
		getRoleList();
		
		var submitflag = true;
	
		layui.use('form', function() {
			var form = layui.form();

			//监听提交
			form.on('submit(cannelDemo)', function(data) {
				if(!submitflag){
					return false;
				}
				submitflag = false;
				$(".layui-btn:first").attr("disabled","disabled");
				$(".layui-btn").addClass("layui-btn-disabled");
				
				var index1 = layer.confirm("确认删除所有角色？", {
					  btn: ["确认", "取消"] 
					}, function(index, layero){
						layer.close(index1);
						var newData = {
							user_guid: userId,
							update_by : $byking.getCookieValue("user_guid"),
							creator_by : $byking.getCookieValue("user_guid")
						};
						$byking.postJSONWithToken($hostconfig.sysAuthHost+"/user/role/rel",newData,function(data){
							layer.msg("取消角色成功!");
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
							return false;
						},function(data){
							submitflag = true;
							$(".layui-btn:first").removeAttr("disabled"); 
							$(".layui-btn").removeClass("layui-btn-disabled");
							layer.msg(data.responseJSON.message, {icon:5});
						});
					},function(data){
						submitflag = true;
						$(".layui-btn:first").removeAttr("disabled"); 
						$(".layui-btn").removeClass("layui-btn-disabled");
						layer.msg(data.responseJSON.message, {icon:5});
						layer.close(index1);
						return false;
					}
				);
				return false;
			});
			
			//监听提交
			form.on('submit(formDemo)', function(data) {
				
				if(!submitflag){
					return false;
				}
				submitflag = false;
				$(".layui-btn:first").attr("disabled","disabled");
				$(".layui-btn").addClass("layui-btn-disabled");
				
				var elements = $("input[name='role']:checked");
				if(!elements || elements.length==0){
					layer.msg("没有提交角色信息!",{icon:5});
					submitflag = true;
					$(".layui-btn:first").removeAttr("disabled"); 
					$(".layui-btn").removeClass("layui-btn-disabled");
					return false;
				}
				
				var roleGuids = [];
				$(":checked").each(function() {
					roleGuids.push($(this).attr("value"));
				});
				var newData = {
					user_guid: userId,
					update_by : $byking.getCookieValue("user_guid"),
					creator_by : $byking.getCookieValue("user_guid"),
					roleGuids : roleGuids
				};
				
				$byking.postJSONWithToken($hostconfig.sysAuthHost+"/user/role/rel",newData,function(data){
					layer.msg("修改账户角色信息成功!");
					var index = parent.layer.getFrameIndex(window.name);
					parent.layer.close(index);
				},function(data){
					submitflag = true;
					$(".layui-btn:first").removeAttr("disabled"); 
					$(".layui-btn").removeClass("layui-btn-disabled");
					layer.msg(data.responseJSON.message, {icon:5});
				});
				return false;
			});
		});
	</script>
</body>
</html>